<template>
    <div class="headLines">
        <div class="scrollList">
            <cube-scroll
                    direction="horizontal"
                    class="horizontal-scroll-list-wrap">
                <ul class="list-wrapper">
                    <li class="list-item" v-for="item in list" :key="item.id" @click="turn(item.id)">
                        <div class="flexBox">
                            <img :src="imgH+item.img"/>
                            <div>{{item.name}}</div>
                        </div>
                    </li>
                </ul>
            </cube-scroll>
        </div>
<!--        <div class="headLinesTitle">-->
<!--            <div class="titleImg">-->
<!--                <img src="../../assets/headLines/headlines.png"/>-->
<!--            </div>-->
<!--            <div class="titleWord">年末大礼：uni-app1.4 新增百度、支付年末大礼：uni-app1.4 新增百度、支付</div>-->
<!--            <div class="titleIcon">></div>-->
<!--        </div>-->
    </div>
</template>

<script>
    export default {
        name : "head-lines",
        props:{
            list:Array,
            id:Number
        },
        data(){
            return{
                imgH : process.env.VUE_APP_IMG_DOMAIN
            }
        },
        methods:{
            turn(path) {
                if(!path)return
                this.$router.push({
                    path:`/goodslist?saletype=${path}`
                })
            }
        }
    }
</script>

<style scoped lang="stylus">
.headLines
    margin 0 .2rem
    padding 0 0.13rem
    padding-bottom 0.27rem
    background-color #fff
    border-radius 0.20rem
    .scrollList
        .horizontal-scroll-list-wrap
            /deep/.cube-scroll-content
                display: inline-block
            .list-wrapper
                /*padding: 0 10px*/
                line-height: 60px
                white-space: nowrap
                margin-top 0.40rem
            .list-item
                display: inline-block
                font-size 0.32rem
                line-height 1
                margin 0 0.33rem
                color #333333
                .flexBox
                    display flex
                    flex-direction column
                    justify-content center
                    align-items center
                    img
                        width 1.20rem
                        height 1.20rem
                        margin-bottom 0.33rem
    .headLinesTitle
        display flex
        justify-content space-between
        color #333333
        font-size 0.32rem
        align-items center
        border-top 1px dashed #333333
        margin-top 0.27rem
        .titleImg
            margin-left 0.27rem
            img
                width 2.08rem
                heigth 0.75rem
        .titleWord
            padding-top 0.07rem
            overflow: hidden
            text-overflow ellipsis
            white-space  nowrap
            margin 0 0.37rem 0 0.25rem
        .titleIcon
            padding-top 0.07rem
            margin-right 0.13rem

</style>